// 这个文件用于定义路由对象
import Vue from 'vue'
import VueRouter from 'vue-router'

// 普通引入组件
// 这样的引入方式,所有的组件,再项目启动的时候就会全部加载到内存中
// import Home from '../pages/Home'
// import About from '../pages/About'

// 路由组件的懒加载
const Home = () => import('../pages/Home')
const About = () => import('../pages/About')
const Test1 = () => import('../pages/Test1')
const Test2 = () => import('../pages/Test2')

// 使用插件VueRouter
Vue.use(VueRouter)
export default new VueRouter({
  // 两种模式: 'history'和'hash'.默认是hash
  mode: 'hash',
  // 路由表
  routes: [
    // 注意: 一级路由不能忽略/
    {
      path: '/home',
      component: Home,
      children: [
        {
          //   path: '/home/test1', //允许写完整写法
          path: 'test1', //也允许简写,注意:/都不要写
          component: Test1,
          name: 't1', // 给Test1路由起了别名叫t1
        },
        {
          //   path: '/home/test2',
          path: 'test2',
          component: Test2,
          name: 't2',
        },
      ],
    },
    {
      // path: '/about/:xxx/:yyy', //定义路由参数.此时xxx和yyy都是必填的路由参数
      path: '/about/:xxx?/:yyy?', //定义路由参数.此时xxx和yyy都是可选的路由参数
      component: About,
      name: 'ab',
      // props: { aaa: 999 }, //传递的props数据,都是以props的形式接收
      // props: true, // 将已经传递的路由参数,以props的形式接收
      props($route) {
        return {
          xxx: $route.params.xxx,
          yyy: $route.params.yyy,
          name: $route.query.name,
          age: $route.query.age,
          arr: [1, 2, 3],
        }
      },
    },
    {
      path: '/',
      redirect: '/home', // 当路径是/时,则重定向到/home
    },
  ],
})
